import NodeBox from '../NodeBox/NodeBox'
import ToolBar from '../toolbar/ToolBar'
import BaseForm from '../baseform/BaseForm'
import EncoderForm from '../encoderform/EncoderForm'
import '../NodeBox/customNode'
import TaskNode from '../NodeBox/lib/TaskNode'

import {Graph, Shape, Addon} from '@antv/x6'
import {Edge} from '@antv/x6'

const {Stencil} = Addon
const {Rect, Circle} = Shape

export default {
  components: {EncoderForm, BaseForm, ToolBar, NodeBox},
  data () {
    return {
      editorTitle: '无',
      graph: null,
      editNode: null,
      editNodeData: {
        nodeType: 'start'
      },
      drawer: {
        attrRight: false
      },
      activeName: 'first',
      flowConfigure: {
        nodes: [
          {
            id: 'node1',
            shape: 'rect', // 使用 rect 渲染
            x: 100,
            y: 200,
            width: 160,
            height: 60,
            label: 'xxx',
            data: {
              name: '我靠',
              nodeType: 'asfdsa',
              code: '张三',
              alias: 'api006',
              desc: 'desc',
              nodeData: {
                keepOldOut: true,
                retryTotal: 1
              }
            },
            attrs: {
              body: {
                fill: 'rgba(0,0,0,0.02)', // 背景颜色
                stroke: '#5F95FF',  // 边框颜色
              },
              label: {
                text: '我靠',    // 文本
                fill: '#333',    // 文字颜色
                fontSize: 13,    // 文字大小
              },
            },
            ports: {
              groups: {
                // 输入链接桩群组定义
                top: {
                  position: 'top',
                  visible: false,
                  attrs: {
                    circle: {
                      r: 4,
                      magnet: true,
                      stroke: '#5F95FF',
                      strokeWidth: 1,
                      fill: '#fff',
                    },
                  },
                },
                left: {
                  position: 'left',
                  attrs: {
                    circle: {
                      r: 4,
                      magnet: true,
                      stroke: '#5F95FF',
                      strokeWidth: 1,
                      fill: '#fff',
                    },
                  },
                },
                bottom: {
                  position: 'bottom',
                  attrs: {
                    circle: {
                      r: 4,
                      magnet: true,
                      stroke: '#5F95FF',
                      strokeWidth: 1,
                      fill: '#fff',
                    },
                  },
                }, right: {
                  position: 'right',
                  attrs: {
                    circle: {
                      r: 4,
                      magnet: true,
                      stroke: '#5F95FF',
                      strokeWidth: 1,
                      fill: '#fff',
                    },
                  },
                },
              },
              items: [
                {
                  id: 'port1',
                  group: 'top',
                },
                {
                  id: 'port2',
                  group: 'left',
                },
                {
                  id: 'port3',
                  group: 'bottom',
                },
                {
                  id: 'port4',
                  group: 'right',
                },
              ],
            },
          },
          {
            id: 'node2',
            shape: 'ellipse', // 使用 ellipse 渲染
            x: 300,
            y: 200,
            width: 80,
            height: 40,
            label: 'hello',
            data: {
              name: '我111靠',
              nodeType: 'asfdsa',
              code: '张三',
              alias: 'api006',
              desc: 'desc',
              nodeData: {
                keepOldOut: true,
                retryTotal: 1
              }
            },
            attrs: {
              body: {
                fill: 'rgba(0,0,0,0.02)', // 背景颜色
                stroke: '#5F95FF',  // 边框颜色
              },
              label: {
                text: '开始',    // 文本
                fill: '#333',    // 文字颜色
                fontSize: 13,    // 文字大小
              },
            }
          },
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
            label: 'x687514445464646789797646',
            attrs: {
              line: {
                stroke: '#5F95FF',
                strokeWidth: 1,
                targetMarker: {
                  name: 'classic',
                  size: 8,
                },
              },
            },
            router: {
              name: 'manhattan',
            }
          }
        ],
      },
      flowCode: null,
      flowVersion: null,
      sceneCode: null
    }
  },
  mounted () {
    this.initGraph()
    this.initBindEvent()
    this.loadFlowConfigure()
  },
  created () {
    let query = this.$route.query
    this.editorTitle = query.flowCode
    this.flowCode = query.flowCode
    this.sceneCode = query.sceneCode
    this.flowVersion = query.flowVersion
    this.id = query.id
  },
  methods: {
    updateFormData (data) {
      // this.editNode.attr('label/text', data.name)
    },
    allowDrop (event) {
      event.preventDefault()
    },
    onDrop (event) {
      event.preventDefault()
      let strData = event.dataTransfer.getData('jsonData')
      let jsonData = JSON.parse(strData)
      console.log(jsonData)
      let x = event.layerX
      let y = event.layerY
      this.graph.addNode({
        x: x,
        y: y,
        width: jsonData.style.width,
        height: jsonData.style.height,
        shape: 'vue-shape',
        ports: {
          groups: {
            // 输入链接桩群组定义
            top: {
              position: 'top',
              visible: false,
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
            left: {
              position: 'left',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
            bottom: {
              position: 'bottom',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            }, right: {
              position: 'right',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                },
              },
            },
          },
          items: [
            {
              id: 'port1',
              group: 'top',
            },
            {
              id: 'port2',
              group: 'left',
            },
            {
              id: 'port3',
              group: 'bottom',
            },
            {
              id: 'port4',
              group: 'right',
            },
          ],
        },
        data: jsonData.data,
        component: {
          template: `<task-node class="${jsonData.data.className}"></task-node>`,
          data () {
            return jsonData.data
          },
          components: {
            TaskNode,
          }
        }
      })
    },
    changePortsVisible (visible) {
      const ports = container.querySelectorAll(
        '.x6-port-body',
      )
      for (let i = 0, len = ports.length; i < len; i = i + 1) {
        ports[i].style.visibility = visible ? 'visible' : 'hidden'
      }
    },
    initGraph () {
      this.graph = new Graph({
          container: document.getElementById('container'),
          selecting: {
            enabled: true,
            multiple: true,
            rubberband: false,
            movable: true,
            showNodeSelectionBox: true,
            className: 'my-selection'
          },
          snapline: true,
          scroller: {
            enabled: true,
            pannable: true,
            pageVisible: true,
            pageBreak: false,
          },
          mousewheel: {
            enabled: true,
            modifiers: ['ctrl', 'meta'],
          },
          minimap: {
            enabled: true,
            container: document.getElementById('minimapContainer'),
          },
          background: {
            color: 'white', // 设置画布背景颜色
          },
          connecting: {
            allowBlank: false,
            allowLoop: false,
            allowNode: false,
            allowEdge: false,
            highlight: true,
            createEdge () {
              // 指定新创建的边为虚线样式
              return Edge.create({
                attrs: {
                  line: {
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    targetMarker: {
                      name: 'classic',
                      size: 8,
                    },
                  },
                },
                router: {
                  name: 'manhattan',
                }
              })
            }
          },
          grid: {
            size: 10,      // 网格大小 10px
            visible: true, // 渲染网格背景
          }
        }
      )
    },
    initBindEvent () {
      this.graph.on('cell:click', ({e, x, y, cell, view}) => {
      })
      this.graph.on('node:dblclick', ({e, x, y, node, view}) => {
        this.editNode = node
        this.drawer.attrRight = !this.drawer.attrRight
        if (node.data == null || node == undefined) {
          node.data = {}
          node.data.id = node.id
        }
        this.editNodeData = node.data
        this.editNodeData.id = node.id
        console.log(this.editNodeData)
      })
      this.graph.on('edge:click', ({e, x, y, edge, view}) => {
      })
      this.graph.on('blank:click', ({e, x, y}) => {
      })
      this.graph.on('cell:mouseenter', ({e, x, y}) => {
        this.changePortsVisible(true)
      })

      this.graph.on('cell:mouseleave', ({e, x, y}) => {
        this.changePortsVisible(false)

      })
      this.graph.on('edge:selected', (cell) => {
        cell.edge.attr({
          line: {
            strokeWidth: 2,
            stroke: 'red',
            // strokeDasharray: '5, 10',
            // strokeDashoffset: (cell.edge.attr('line/strokeDashoffset') | 0) + 20,
          },
        })
      })
      this.graph.on('edge:unselected', (cell) => {
        cell.edge.attr({
          line: {
            strokeWidth: 1,
            stroke: '#5F95FF',  // 边框颜色
            // strokeDasharray: '5, 10',
            // strokeDashoffset: (cell.edge.attr('line/strokeDashoffset') | 0) + 20,
          },
        })
      })
    },
    loadFlowConfigure () {
      let query = this.$route.query
      if (query.flowConfigurationEditor != null) {
        for (let cell of query.flowConfigurationEditor.cells) {
          if (cell.shape != 'edge') {
            this.graph.addNode({
              id: cell.id,
              x: cell.position.x,
              y: cell.position.y,
              width: cell.size.width,
              height: cell.size.height,
              shape: 'vue-shape',
              ports: {
                groups: {
                  // 输入链接桩群组定义
                  top: {
                    position: 'top',
                    visible: false,
                    attrs: {
                      circle: {
                        r: 4,
                        magnet: true,
                        stroke: '#5F95FF',
                        strokeWidth: 1,
                        fill: '#fff',
                      },
                    },
                  },
                  left: {
                    position: 'left',
                    attrs: {
                      circle: {
                        r: 4,
                        magnet: true,
                        stroke: '#5F95FF',
                        strokeWidth: 1,
                        fill: '#fff',
                      },
                    },
                  },
                  bottom: {
                    position: 'bottom',
                    attrs: {
                      circle: {
                        r: 4,
                        magnet: true,
                        stroke: '#5F95FF',
                        strokeWidth: 1,
                        fill: '#fff',
                      },
                    },
                  }, right: {
                    position: 'right',
                    attrs: {
                      circle: {
                        r: 4,
                        magnet: true,
                        stroke: '#5F95FF',
                        strokeWidth: 1,
                        fill: '#fff',
                      },
                    },
                  },
                },
                items: [
                  {
                    id: 'port1',
                    group: 'top',
                  },
                  {
                    id: 'port2',
                    group: 'left',
                  },
                  {
                    id: 'port3',
                    group: 'bottom',
                  },
                  {
                    id: 'port4',
                    group: 'right',
                  },
                ],
              },
              data: cell.data,
              component: {
                template: cell.component.template,
                data () {
                  return {}
                },
                components: {
                  TaskNode,
                }
              }
            })
          } else {

          }
        }
        for (let cell of query.flowConfigurationEditor.cells) {
          if (cell.shape == 'edge') {
            console.log('加载线条')
            this.graph.addEdge(
              cell
            )
          }
        }
      }
    }
  }
}
